<template>
  <div class="certify_page">
    <div class="page_head">
      <div class="width-style">
        <!--        顶部栏-->
        <div class="head">
          <el-row :gutter="20">
            <el-col :span="4">
              <div class="logo" @click="clickLogo">
                <img src="../../assets/images/logo.jpg" />
                <span class="siteName">全民健康网</span>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="title_ipt_wrap" @click="to">
                <span
                  style="font-size: 18px; padding-left: 15px; padding-top: 7px"
                >医生认证</span
                >
              </div>
            </el-col>
            <el-col :span="2">
              <el-button
                @click="clickPsn"
                type="text"
                style="width: calc(100% - 65px)"
              >个人中心</el-button
              >
            </el-col>
          </el-row>
        </div>
        <!--        认证部分-->
        <div class="certify">
          <el-form label-width="110px" style="padding-bottom: 100px">
            <!--            <el-input v-model="subForm.test" placeholder="请输入内容"></el-input>-->

            <el-form-item label="认证身份类型：" prop="type">
              <el-select v-model="subForm.type" placeholder="请选择身份类型">
                <el-option label="医生" :value="0"></el-option>
                <el-option label="健康营养师" :value="1"></el-option>
                <el-option label="管理师" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="真实姓名：">
              <el-input v-model="subForm.doctorName"></el-input>
            </el-form-item>
            <el-form-item label="认证头像：">
              <!-- <imageUpload v-model="subForm.doctorAvatar" /> -->
              <div style="display: flex">
                <img
                  v-if="subForm.doctorAvatar"
                  :src="subForm.doctorAvatar + ''"
                  style="border-radius: 50%; width: 148px; margin-right: 10px"
                />
                <el-upload
                  action="#"
                  list-type="picture-card"
                  class="cover"
                  :limit="1"
                  accept="image/*"
                  :on-change="uploadHandler"
                  :show-file-list="false"
                  :file-list="avatarList"
                  :on-success="handleAvatar"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
              <div class="cropper">
                <vueCropper
                  ref="cropper"
                  :img="option.img"
                  :output-size="option.size"
                  :output-type="option.outputType"
                  :info="true"
                  :full="option.full"
                  :fixed="true"
                  :can-move="option.canMove"
                  :can-move-box="option.canMoveBox"
                  :fixed-box="option.fixedBox"
                  :original="option.original"
                  :auto-crop="option.autoCrop"
                  :auto-crop-width="option.autoCropWidth"
                  :auto-crop-height="option.autoCropHeight"
                  :center-box="option.centerBox"
                  :high="option.high"
                  mode="cover"
                  :max-img-size="option.max"
                />
                <el-button @click="getCropData" style="margin-left: 20px"
                >截取</el-button
                >
              </div>
            </el-form-item>
            <el-form-item label="身份证：">
              <el-upload
                action="#"
                list-type="picture-card"
                :limit="1"
                :on-success="handleCard"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="毕业证书：">
              <el-upload
                action="#"
                :limit="1"
                list-type="picture-card"
                :on-success="handleCertificate"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <!-- <el-form-item label="工作证明：">
              <el-input v-model="employment"></el-input>
            </el-form-item> -->
            <el-form-item label="所在城市：">
              <el-cascader
                :options="cityOptions"
                class="address"
                v-model="subForm.city"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="所属医院："
            ><el-input v-model="subForm.unit"></el-input
            ></el-form-item>
            <el-form-item label="科室："
            ><el-input v-model="subForm.department"></el-input
            ></el-form-item>
            <el-form-item label="专业领域："
            ><el-input v-model="subForm.field"></el-input
            ></el-form-item>
            <el-form-item label="擅长疾病："
            ><el-input v-model="subForm.skilled"></el-input
            ></el-form-item>
            <el-form-item label="临床职称："
            ><el-input v-model="subForm.grade"></el-input
            ></el-form-item>
            <el-form-item label="个人介绍：">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                v-model="subForm.description"
                maxlength="100"
                show-word-limit
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <!--        底部栏-->
        <div class="page_foo">
<!--          <el-button type="primary" class="green-button" plain>保存</el-button>-->
          <el-button type="primary" plain @click="pubSubClick">提交</el-button>
        </div>
        <el-dialog
          title=""
          width="30%"
          :show-close="true"
          :close-on-click-modal="false"
          :visible.sync="subSuccessPop"
          append-to-body
        >
          <el-result
            icon="success"
            title="提交成功"
            v-show="isSuccess"
          ></el-result>
          <el-result
            icon="error"
            title="请输入完全信息再提交且不可重复认证"
            v-show="!isSuccess"
          ></el-result>
          <template>
            <el-button
              type="primary"
              size="medium"
              @click="subSuccessPop = false"
            >确定</el-button
            >
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  middleware: ['authenticated'],
  name: "doctorCertify",
  data() {
    return {
      option: {
        img: "",
        size: 1,
        full: false,
        outputType: "png",
        canMove: true,
        fixedBox: false,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        centerBox: false,
        high: true,
      },
      content: "",
      toolBarwidth: "500px",
      keywords: "",
      subSuccessPop: false,
      imageUrl: "",
      selectedOptions: [],
      textarea: "",
      subForm: {
        type: "",
        doctorId:null,
        doctorName: "",
        doctorAvatar: "",
        doctorCard: "",
        diploma: "",
        city: [],
        unit: "",
        department: "",
        field: "",
        skilled: "",
        grade: "",
        description: "",
        deleteFlag: 0,
        revieweFlag: 0,
      },
      cityOptions: [
        {
          label: "四川省",
          value: "四川省",
          children: [
            {
              label: "成都市",
              value: "成都市",
            },
            {
              label: "自贡市",
              value: "自贡市",
            },
            {
              label: "攀枝花市",
              value: "攀枝花市",
            },
            {
              label: "泸州市",
              value: "泸州市",
            },
            {
              label: "德阳市",
              value: "德阳市",
            },
            {
              label: "绵阳市",
              value: "绵阳市",
            },
            {
              label: "广元市",
              value: "广元市",
            },
            {
              label: "遂宁市",
              value: "遂宁市",
            },
            {
              label: "内江市",
              value: "内江市",
            },
            {
              label: "乐山市",
              value: "乐山市",
            },
            {
              label: "南充市",
              value: "南充市",
            },
            {
              label: "眉山市",
              value: "眉山市",
            },
            {
              label: "宜宾市",
              value: "宜宾市",
            },
            {
              label: "广安市",
              value: "广安市",
            },
            {
              label: "达州市",
              value: "达州市",
            },
            {
              label: "雅安市",
              value: "雅安市",
            },
            {
              label: "巴中市",
              value: "巴中市",
            },
            {
              label: "资阳市",
              value: "资阳市",
            },
            {
              label: "阿坝藏族羌族自治州",
              value: "阿坝藏族羌族自治州",
            },
            {
              label: "甘孜藏族自治州",
              value: "甘孜藏族自治州",
            },
            {
              label: "凉山彝族自治州",
              value: "凉山彝族自治州",
            },
          ],
        },
      ],
      avatarList: [],
      cardList: [],
      certificateList: [],
      userName: "",
      employment: "",
      city: [],
      hospital: "",
      department: "",
      disease: "",
      title: "",
      introduction: "",
      isSuccess: true,
      qmUserInfo:{},
    };
  },
  mounted(){
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      const res = await this.$api.reqUserInfo();
      this.qmUserInfo = res.user
      // console.log(this.qmUserInfo)
    },
    getCropData() {
      this.$refs.cropper.getCropData((data) => {
        this.subForm.doctorAvatar = data;
      });
    },
    uploadHandler(file) {
      this.getBase64(file.raw).then((res) => {
        this.option.img = res;
        this.avatarList = [];
      });
    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    clickLogo() {
      let link = this.$router.resolve({
        path: "/home",
      });
      window.open(link.href, "_blank");
    },
    clickPsn() {
      let link = this.$router.resolve({
        path: "/personalcenter",
      });
      window.open(link.href, "_blank");
    },
    pubSubClick() {
      const isSuccess =
        this.subForm.type &&
        this.subForm.doctorName &&
        this.subForm.department &&
        this.subForm.field &&
        this.subForm.skilled &&
        this.subForm.grade &&
        this.subForm.unit &&
        this.subForm.city.length >= 2 &&
        this.subForm.doctorAvatar &&
        this.subForm.doctorCard &&
        this.subForm.diploma &&
        this.subForm.description;
      if (isSuccess) {
        this.$api
          .reqDoctorCtertify({ ...this.subForm, doctorId:this.qmUserInfo.userId,city: this.subForm.city[1] })
          .then((res) => {
            console.log(res);
          });
      } else {
        this.isSuccess = isSuccess;
      }
      this.subSuccessPop = true;
    },
    to() {},
    handleAvatar(response, file) {
      this.avatarList.push(file);
      // console.log(this.avatarList);
    },
    handleCard(response, file) {
      this.subForm.doctorCard = file.url;
    },
    handleCertificate(response, file) {
      this.subForm.diploma = file.url;
    },
  },
};
</script>

<style lang="scss" scoped>
.certify_page {
  width: 100%;
  //background-color: #f6f7f9;
  text-align: left !important;
  //padding-top: 62px;
  .page_head {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 10px 0;
    box-sizing: border-box;
    .title_ipt_wrap {
      display: flex;
      align-items: center;
      border-left: 2px solid #d7d7d7;
    }
    .head {
      //position: fixed;
      //z-index: 2;
    }
  }
  .logo {
    display: -webkit-flex;
    float: left;
    margin-left: 20px;
    margin-right: 100px;
    vertical-align: center;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    img {
      height: 40px;
      width: 40px;
    }
    .siteName {
      font-weight: 700;
      font-size: 18px;
      width: 110px;
    }
  }
}
.width-style {
  text-align: left;
  padding-right: 100px;
  box-sizing: border-box;
  .certify {
    width: 400px;
    height: 300px;
    padding-top: 50px;
    margin: 0 auto;
    .address {
    }
  }
}
.page_foo {
  width: 200px;
  background-color: #fff;
  position: fixed;
  right: 20%;
  bottom: 20px;
  z-index: 1000;
  font-size: 11px;
  line-height: 28px;
  height: 40px;
  padding: 2px 15px 0 15px;
  margin: 0 auto;
}
.el-upload--picture-card {
  width: 100px;
  height: 100px;
}
.cover {
  ::v-deep .el-upload--picture-card {
    border-radius: 50%;
  }
}
.cropper {
  width: 400px;
  height: 300px;
  display: flex;
  margin: 20px 0;
  align-items: end;
}
.el-form-item {
  margin-bottom: 10px;
}
</style>
